<template>
	<el-dialog v-model="dialog" title="日志详情" width="60%">
		<el-descriptions :column="2" border>
			<el-descriptions-item label="操作用户">{{ form.userName }}</el-descriptions-item>
			<el-descriptions-item label="操作标题">{{ form.title }}</el-descriptions-item>
			<el-descriptions-item label="请求状态">
				<el-tag type="success" v-if="form.status == '1'">成功</el-tag>
				<el-tag type="danger" v-if="form.status == '0'">失败</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="请求方法">{{ form.requestMethod }}</el-descriptions-item>
			<el-descriptions-item label="请求URI">{{ form.requestUri }}</el-descriptions-item>
			<el-descriptions-item label="请求时长">{{ form.requestTime }}</el-descriptions-item>
			<el-descriptions-item label="操作地点">{{ form.location }}</el-descriptions-item>
			<el-descriptions-item label="操作方法">{{ form.method }}</el-descriptions-item>
		</el-descriptions>
		<el-descriptions direction="vertical" :column="1" border v-if="form.exMsg">
			<el-descriptions-item label="异常信息">{{ form.exMsg }}</el-descriptions-item>
		</el-descriptions>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
interface DataForm {
	form: {
		userName: string;
		title: string;
		status: string;
		requestMethod: string;
		requestUri: string;
		requestTime: string;
		method: string;
		exMsg: string;
		location: string;
	};
}
export default defineComponent({
	setup() {
		const dialog = ref(false);
		const data = reactive<DataForm>({
			form: { userName: '', title: '', status: '', requestMethod: '', requestUri: '', requestTime: '', method: '', exMsg: '', location: '' },
		});
		return { dialog, ...toRefs(data) };
	},
});
</script>
